<!-- 输入框组件  -->
<template>
  <div class="inputpage">
    <div class="inputopa"></div>
    <div class="inputwrapper">
      <span v-if="qid1">{{source.type === 1 ? '回复': '评论'}}   {{source.name}}：</span>
      <span v-if="!qid1">{{source.type === 2? '发布问题': '发布评论'}}</span>
      <el-input
        type="textarea"
        :rows="3"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>

      <div class="point" v-if="!qid1 && source.type === 2">
        <span>设置问题点数：</span>
        <el-slider :min="0" :max="point" :step="1" v-model="questionPoint"></el-slider>
      </div>
      <div class="btnwrapper">
        <div class="btn" @click="close">取消</div>
        <div class="btn" @click="releasereply">发布</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'inputpage',
  data () {
    return {
      textarea: '',
      qid1: null,
      questionPoint: 0
    }
  },
  props: ['source'],
  computed: {
    ...mapState({
      memberNo: 'memberNo',
      current: 'current',
      name: 'name',
      point: 'point'
    })
  },
  methods: {
    releasereply () {
      console.log(this.point)
      if (this.textarea !== '') {
        let content = this.textarea
        let date = new Date().getTime()
        let memberNo = this.memberNo
        let memberName = this.name
        let qid = this.$route.query.qid
        let classNo = this.$route.query.classNo
        let chapterNo = this.$route.query.chapterId
        let questionPoint = this.questionPoint
        let path = ''
        let data = ''
        // 提交问题/评论回复规范
        let data1 = {
          memberNo, // 发布人
          memberName, // 发布人昵称
          questionNo: qid, // 原评论
          answerDate: date, // 发布时间
          answerContent: content // 发布内容
        }
        // 发布问题规范
        let data2 = {
          memberNo,
          content,
          questionPoint,
          classNo,
          chapterNo,
          date
        }
        // 发布评论规范
        let data3 = {
          memberNo,
          memberName,
          content,
          chapterNo,
          date
        }
        // 甄别详情页面发布评论或者问题
        if (this.source.type === 1) {
          // 在回复页面，回复问题
          path = '/api/reply/send?questionNo=' + qid
          data = data1
          console.log('在回复页面，回复问题')
        } else if (this.source.type === 2){
            // 在课程页面，发布问题
          path = '/api/qandA/sendQue'
          data = data2
          console.log('在课程页面，发布问题')
          let pointPath = '/api/qandA/sendQue/changePoint'
          let pointChange = (-1) * this.questionPoint
          let dataPoint = {
            pointChange,
            memberNo
          }
          this.http.post(pointPath, dataPoint, res => {
            if (res.status === 200) {
              let data = res.data.result
              if (data.code === 200) {
                console.log('已扣分')
                return
              }
            }
          })
        } else if (this.source.type === 3) {
          // console.log(this.$route.query.type)
          path = '/api/reply/sendComment?CommentNo=' + qid
          data = data1
          console.log('在回复页面，回复评论')
        } else if (this.source.type === 4) {
          path = '/api/qandA/sendMes'
          data = data3
          console.log('在课程页面，发布评论')
        }
        console.log('发布内容')
        console.log(path, data)
        this.http.post(path, data, res => {
          if (res.status === 200) {
            let data = res.data.result
            if (data.code === 200) {
              this.$emit('release')
            }
          }
        })
      } else alert('发布内容不能为空')
    },
    close () {
      this.$emit('closeinput')
    },
    showmounted () {
      this.qid1 = this.$route.query.qid
      console.log(this.qid1)
      console.log(typeof this.source.type, this.source.type)
      console.log(this.source.type === 2)
      console.log(typeof this.$route.query.type, this.$route.query.type)
    }
  },
  mounted () {
    this.showmounted()
  }
}
</script>
<style lang="scss" scoped>
.inputpage {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}
.inputopa {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.8;
  top: 0;
  left: 0;
}
.cancel {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}
.inputwrapper {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  span{
    font-size: 14px;
    display: block;
    margin-bottom: 20px;
  }
}
.btnwrapper {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.point{
  width: 100%;
  height: auto;
  margin: 20px auto;
  span{
    margin-bottom: 5px;
  }
  div{
    width: 90%;
    margin: auto;
  }
}
</style>
